<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        提取外部JS 
        1. 结构(html) 表现(css)和功能(js) 相分离
        2. 代码复用(按需引入)
        
    -->
    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/tool.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/myQuery.js"></script>

    <!-- 引入的js文件会在页面加载时 载入执行 => 多个全局变量  => 全局污染 -->
</head>

<body>

</body>
<script>
    // console.log(ajax);
    // console.log(setCookie);
    // console.log(getCookie);
    // console.log(deleteCookie);
    // console.log(urlParamsParse);
    // console.log(request);
    // console.log(isExistUser);
    // console.log($);
    // console.log(GetEle);

</script>
<script>
    // 模块化 => 
    // ### 什么是模块化？
    // 1. 将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来(按照需求引入)
    // 2. 减少小全局变量的使用
    // 3. 提高代码的复用 (可以按需引入,也可以在一个模块中引入另一个模块 )

    // 简单的来说,模块化的的意思:采用分类的思想把问题进行系统性的分解,每一个单独的文件(JS) 就是一个单独的模块,最后通过简单的方法将需要使用的模块引入使用(拼接起来) => 达到想要的效果

    // 优点: 
    // 1. 避免全局变量污染(减少小全局变量的使用)
    // 2. 按需引入 (需要用什么就引入什么)
    // 3. 方便后期后话,减少维护成本
    // 4. 降低复杂度,将低代码耦合
    // 5. 每一个单独的文件(JS) 就是一个单独的模块(独立的功能)  (模块/组件/包) 

    // 如何实现模块化?  发展历程

    // 举例说明
    // 原始代码 => 未优化 => 4个全局变量
    // var a = 10;
    // var b = 20;
    // function addA() {
    //     a++;
    //     return a;
    // }
    // function addB() {
    //     b++;
    //     return b;
    // }

    // 整合到对象中  =>  全局变量 4个 变为 一个
    // 缺点: 数据可以被外部直接访问
    // var module = {
    //     a: 10,
    //     b: 20,
    //     addA: function () {
    //         this.a++;
    //         return this.a;
    //     },
    //     addB: function () {
    //         this.b++;
    //         return this.b;
    //     },
    // }
    // var result = module.addA();
    // console.log(result);
    // var result = module.addB();
    // console.log(result);


    // 闭包 
    function module() {
        var a = 10;
        var b = 20;

        return {
            addA: function () {
                a++;
                return a;
            },
            getA() {
                return a;
            },
            addB: function () {
                a++;
                return a;
            },
            getB() {
                return b;
            },
        }
    }

    var obj = module();
    obj.addA();
    console.log(obj.getA());


    // 在闭包的继承上 后面又衍生出 AMD  CMD   => ES6(前端 ES6Module) + CommonJS(Node的模块化)


</script>

</html>